<template>
	<view class="content">
		<view class="banner">
			<u-swiper  :list="list"  indicator  indicatorMode="line" height="500" indicatorActiveColor="#333" indicatorInactiveColor="rgba(165, 165, 165, .4)" radius="0" circular></u-swiper>
			<!-- <view class="heart" @click="handleVish" :style="'top:'+(systemInfo.customBar+10)+'px'">
				<image src="/static/v.png" mode=""></image>
			</view> -->
			<!-- 	heart-fill -->
			<button  open-type="share" class="heart"  :style="'top:'+(systemInfo.customBar+10)+'px'">
				<image src="/static/t.png" mode=""></image>
			</button>
			<view class="arrow-left" :style="'padding-top:'+(systemInfo.statusBar)+'px;height:'+(systemInfo.navbar)+'px'">
				<view class="icon" v-if="showHomeButton" :style="'height:'+(systemInfo.navbar)+'px'" @click="handleBackHome" >
					<u-icon name="home" color="#333" size="20"></u-icon>
				</view>
				<view class="icon" v-else :style="'height:'+(systemInfo.navbar)+'px'" @click="handleBack" >
					<u-icon name="arrow-left" color="#333" size="20"></u-icon>
				</view>
			</view>
		</view>
		
		<view class="page-top">
			<view class="sbox1">
				<view class="t1">
					会员价 ￥{{product.price}}
				</view>
				<view class="t2">
					官网价 ￥{{product.originalPrice}}
				</view>
				<view class="t3" v-if="product.sale > 0">
					销量{{product.sale}}件
				</view>
			</view>
			<view class="sbox2">
				{{product.name}}
			</view> 
		</view>
		
		
		
		<view class="reviews" v-if="commentTotal > 0">
			<view class="top">
				<text>商品评价 ({{commentTotal}})</text>
				<view class="more" @click="handleToGoodsReview">
					<!-- 好评率98.5% -->
					<u-icon name="arrow-right" size="14" color="#999999"></u-icon>
				</view>
			</view>
			<view class="bot" v-for="item in commentList" :key="item.id" @click="handleToGoodsReview">
				<view class="t">
					<view class="userinfo">
						<image :src="item.memberIcon" mode=""></image>
						<view class="text">
							<text>{{item.memberNickName}}</text>
							<u-rate active-color="#333" v-model="item.star" :count="5" :readonly="true" size="14"></u-rate>
						</view> 
					</view>
					<view class="time">
						{{item.createTime}}
					</view> 
				</view>
				<view class="con">
					{{item.content}}
				</view>
				<view class="imglist">
					<image v-for="sitem in item.pics.split(',')" :key="sitem" :src="sitem" mode=""></image>  
				</view>
			</view>
		</view>
		
		<view class="goodsDetail">
			<view class="title">
				商品详情
			</view>
			<u-parse :content="product.detailMobileHtml" :tagStyle="style"></u-parse>
		</view>
		<view class="zw" :style="{'padding-bottom':bottomPadding?bottomPadding+'px':'15px'}">
			
		</view>
		<view class="goodsBottomBtn"  :style="{'padding-bottom':bottomPadding?bottomPadding+'px':'15px'}">
			<view class="left"> 
				<button open-type="contact" class="item contact"> 
					 <image src="/static/w1.png" mode=""></image>
				</button>
				<!-- <view class="item" @click="handleToBags">
					 <image src="/static/w2.png" mode=""></image>
				</view> -->
			</view>
			<view class="right">
				<view class="btn2"  @click="handleSubmit('buy')">
					立即购买
				</view>
			</view>
		</view> 
		
		<poster-component
		      ref="posterRef"
		      :goodsInfo="{
		        image: product.pic,
		        title: product.name,
		        price: product.price,
		        qrcode: codeImg
		      }"
		    />
		     
		 <u-popup :show="shareShow" mode="bottom"  @close="shareShow = false" bgColor="#F1F1F1">
			 <view class="shareBox">
			 	<view class="item"  @tap="generatePoster">
			 		<image src="/static/s1.jpg" mode=""></image>
					<text>保存海报</text>
			 	</view>
				<button  open-type="share" class="item">
					<image src="/static/s2.jpg" mode=""></image>
					<text>微信好友</text>
				</button>
				<!-- <button  open-type="share-timeline" class="item">
					<image src="/static/s3.jpg" mode=""></image>
					<text>朋友圈</text>
				</button> -->
			 </view>
		 </u-popup>
		
		 
		 <u-popup :show="show" mode="bottom"  @close="show = false">
			<view class="chooseGoodsBox">
				<view class="pop_t1">
					<view class="t">
						<view class="t1">
							￥{{product.price}}
						</view>
						<text class="stock">库存：{{product.stock}}件</text>
					</view>
					<view class="t2">
						已选：<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
								{{sItem.name}}
							</text>
					</view>
				</view>
				<view v-for="(item,index) in specList" :key="index" class="attr-list">
					<text>{{item.name}}</text>
					<view class="item-list">
						<text v-for="(childItem, childIndex) in specChildList" v-if="childItem.pid === item.id" :key="childIndex" class="tit"
						 :class="{selected: childItem.selected}" @click="selectSpec(childIndex, childItem.pid)">
							{{childItem.name}}
						</text>
					</view>
				</view>
				<!--<view class="color">
					 <view class="title">
						颜色
					</view>
					<view class="cbox">
						<view class="item active">
							<view class="block" style="background: #0D0D0D;"></view>
							<view class="text">黑色</view>
						</view>
						<view class="item">
							<view class="block" style="background: #E0D0C1;"></view>
							<view class="text">米黄色</view>
						</view>
						<view class="item">
							<view class="block" style="background: #FF88C3;"></view>
							<view class="text">粉色</view>
						</view>
					</view> 
				</view>-->
				<view class="goodsNum">
					<view class="title">
						数量
					</view>
					<u-number-box v-model="count" buttonSize="24"></u-number-box>
				</view>
				<view class="btn">
					<view class="btn2" style="width: 100%;margin-left: 0;" v-if="chooseType == 'buy'" @click="handleToSubmit">
						立即购买
					</view> 
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import PosterComponent from '@/components/poster.vue'
	export default{
		components: {
		    PosterComponent
		  },
		data(){
			return{
				skuId:'',
				chooseType:'',
				id:'',
				commentTotal:'',
				commentList:[],
				count:1,
				show:false,
				shareShow:false,
				list:[],
				product:'',
				skuStockList:[],
				specChildList:[],
				specSelected:[],
				specList:[],
				content:'123',
				storeId:'',
				style: { 
					p: 'color: #545454;font-size:32rpx;line-height:44rpx;margin-bottom:20rpx',
					span: 'font-size: 30rpx',
					img:'width:100% !important;height:auto !important;display:block'
				},
				bottomPadding:0,
				codeImg:'',
				showHomeButton:false
			}
		},
		computed:{
			systemInfo(){ 
				return uni.getStorageSync('systemInfo')	
			}
		},
		onLoad(e) {  
			this.id = e.id
			this.storeId = e.storeId
			this.getDetail()
			this.getCodeImg()
			this.getComment()
			
			const pages = getCurrentPages() 
			if (pages.length === 1) { 
			   this.showHomeButton = true
			} 
			
			this.bottomPadding = uni.getStorageSync('bottomPadding') 
		},
		// 分享给好友的设置
		onShareAppMessage(res) {
			return {
				title: this.product.name,
				path: `/pagesA/store/goods/buy?id=${this.id}&storeId=${this.storeId}`,
				imageUrl: this.product.pic,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
			// // 分享到朋友圈的设置
			// onShareTimeline() {
			// 	return {
			// 		title:  this.product.name,
			// 		query: 'from=timeline',
			// 		imageUrl: this.product.pic,
			// 		success(res) {
			// 			uni.showToast({
			// 				title: '分享成功'
			// 			})
			// 		},
			// 		fail(res) {
			// 			uni.showToast({
			// 				title: '分享失败',
			// 				icon: 'none'
			// 			})
			// 		}
			// 	}
			// },
		methods:{ 
			handleBackHome(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			getCodeImg(){
				this.$http({
					url:"/product/share",
					method:"get",
					data:{
						id:this.id
					}
				}).then(data=>{
					this.codeImg = data.url
				})
			},
			getComment(){
				this.$http({
					url:"/pmsComment/paginQuery",
					method:"get",
					data:{
						productId:this.id,
						pageSize:1,
						pageNum:1
					}
				}).then(data=>{
					this.commentList = data.list
					this.commentTotal = data.total
				})
			},
			handleVish(){
				this.$http({
					url:"/omsWish/add",
					method:"post",
					data:{
						productId:this.id
					}
				}).then(()=>{
					uni.showToast({
						title:"添加成功",
						icon:"none"
					})
				})
			},
			generatePoster() {
			  this.$refs.posterRef.showPosterModal()
			  this.shareShow = false
			},
			handleToBags(){
				if(uni.getStorageSync('token')){
					uni.switchTab({
						url:"/pages/bags/index"
					})
				}else{
					uni.reLaunch({
						url:"/pages/user/login"
					})
				}
			},
			handleToSubmit(){
				this.$http({
					url:"/order/generateConfirmOrder",
					data:{
						count:this.count,
						skuId:this.skuId
					}
				}).then(data=>{
					const info = JSON.stringify(data)
					uni.setStorageSync('confirmOrderInfo',info)
					 this.show = false
					uni.navigateTo({
						url:`./submitOrder?skuId=${this.skuId}&storeId=${this.storeId}`
					})
				})
			},
			getDetail(){
				this.$http({
					url:`/product/detail/${this.id}`,
					method:"get"
				}).then(data=>{
					this.list = data.product.albumPics.split(',')
					this.product = data.product;
					this.skuStockList = data.skuStockList;
					this.initSpecList(data);
				})
			},
			//将商品加入到购物车
			handleToAddCart() { 
				let productSkuStock = this.getSkuStock();
				let cartItem = {
					productId: this.product.id, 
					productSkuId: productSkuStock.id,
					quantity: this.count
				};
				this.$http({
					url:"/cart/add",
					data:cartItem
				}).then(data => {
					 uni.showToast({
					 	title:"添加成功",
						icon:"none"
					 })
					 this.show = false
				});
			},
			handleSubmit(type){
				if (!this.checkForLogin()) {
					return;
				}
				this.chooseType = type
				this.show = true
			},
			//检查登录状态并弹出登录框
			checkForLogin() {
				if (!uni.getStorageSync('token')) {
					uni.showModal({
						title: '提示',
						content: '你还没登录，是否要登录？',
						confirmText: '去登录',
						cancelText: '取消',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/user/login'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return false;
				} else {
					return true;
				}
			},
			//获取当前选中商品的SKU
			getSkuStock() {
				for (let i = 0; i < this.skuStockList.length; i++) {
					let spDataArr = JSON.parse(this.skuStockList[i].spData);
					let availAbleSpecSet = new Map();
					for (let j = 0; j < spDataArr.length; j++) {
						availAbleSpecSet.set(spDataArr[j].key, spDataArr[j].value);
					}
					let correctCount = 0;
					for (let item of this.specSelected) {
						let value = availAbleSpecSet.get(item.pname);
						if (value != null && value == item.name) {
							correctCount++;
						}
					}
					if (correctCount == this.specSelected.length) {
						return this.skuStockList[i];
					}
				}
				return null;
			},
			//获取当前选中商品的SKU
			getSkuStock() {
				for (let i = 0; i < this.skuStockList.length; i++) {
					let spDataArr = JSON.parse(this.skuStockList[i].spData);
					let availAbleSpecSet = new Map();
					for (let j = 0; j < spDataArr.length; j++) {
						availAbleSpecSet.set(spDataArr[j].key, spDataArr[j].value);
					}
					let correctCount = 0;
					for (let item of this.specSelected) {
						let value = availAbleSpecSet.get(item.pname);
						if (value != null && value == item.name) {
							correctCount++;
						}
					}
					if (correctCount == this.specSelected.length) {
						return this.skuStockList[i];
					}
				}
				return null;
			},
			//设置商品规格
			initSpecList(data) {
				for (let i = 0; i < data.productAttributeList.length; i++) {
					let item = data.productAttributeList[i];
					if (item.type == 0) {
						this.specList.push({
							id: item.id,
							name: item.name
						});
						if (item.handAddStatus == 1) {
							//支持手动新增的
							let valueList = data.productAttributeValueList;
							let filterValueList = valueList.filter(value => value.productAttributeId == item.id);
							console.log('filterValueList',filterValueList)
							let inputList = filterValueList[0].value.split(',');
							for (let j = 0; j < inputList.length; j++) {
								this.specChildList.push({
									pid: item.id,
									pname: item.name,
									name: inputList[j],
									pic: item.pic,
								});
							}
						} else if (item.handAddStatus == 0) {
							//不支持手动新增的
							let inputList = item.inputList.split(',');
							for (let j = 0; j < inputList.length; j++) {
								this.specChildList.push({
									pid: item.id,
									pname: item.name,
									name: inputList[j]
								});
							}
						}
					}
				}
				let availAbleSpecSet = new Set();
				for (let i = 0; i < this.skuStockList.length; i++) {
					let spDataArr = JSON.parse(this.skuStockList[i].spData);
					for (let j = 0; j < spDataArr.length; j++) {
						availAbleSpecSet.add(spDataArr[j].value);
					}
				}
				// 根据商品sku筛选出可用规格
				this.specChildList = this.specChildList.filter(item => {
					return availAbleSpecSet.has(item.name)
				});
				// 规格 默认选中第一条
				this.specList.forEach(item => {
					for (let cItem of this.specChildList) {
						if (cItem.pid === item.id) {
							this.$set(cItem, 'selected', true);
							this.specSelected.push(cItem);
							this.changeSpecInfo();
							break;
						}
					}
				})
			},
			//选择规格
			selectSpec(index, pid) {
				let list = this.specChildList;
				list.forEach(item => {
					if (item.pid === pid) {
						this.$set(item, 'selected', false);
					}
				})

				this.$set(list[index], 'selected', true);
				//存储已选择
				/**
				 * 修复选择规格存储错误
				 * 将这几行代码替换即可
				 * 选择的规格存放在specSelected中
				 */
				this.specSelected = [];
				list.forEach(item => {
					if (item.selected === true) {
						this.specSelected.push(item);
					}
				})
				this.changeSpecInfo();

			},
			changeSpecInfo() {
				let skuStock = this.getSkuStock(); 
				this.skuId = skuStock.id
				// if (skuStock != null) {
				// 	this.product.originalPrice = skuStock.price;
				// 	if (this.product.promotionType == 1) {
				// 		//单品优惠使用促销价
				// 		this.product.price = skuStock.promotionPrice;
				// 	} else {
				// 		this.product.price = skuStock.price;
				// 	}
				// 	this.product.stock = skuStock.stock;
				// }
			},
			handleBack(){
				uni.navigateBack()
			},
			handleToGoodsReview(){
				uni.navigateTo({
					url:`/pages/category/reviews?id=${this.id}`
				})
			}
		}
	}
</script>

<style>
	page{
		background: #F8F8F8;
	}
</style>

<style lang="scss" scoped>
	.heart{
		position: absolute;
		right: 30rpx;
		top: 50rpx;
		z-index: 999;
		padding: 0;
		background: none;
		&::after{
			border: none;
		}
		image{
			display: block;
			width: 44rpx;
			height: 44rpx;
		}
	}
	.attr-list {
				display: flex;
				flex-direction: column;
				font-size: 22rpx;
				color: #333;
				padding-top: 20upx;
			}
	
			.item-list {
				padding: 20upx 0 0;
				display: flex;
				flex-wrap: wrap;
	
				text {
					display: flex;
					align-items: center;
					justify-content: center;
					background: #eee;
					margin-right: 20upx;
					margin-bottom: 20upx;
					border-radius: 100upx;
					min-width: 60upx;
					height: 60upx;
					padding: 0 20upx;
					font-size: 24rpx;
					color: #333;
				}
	
				.selected {
					background: #020202;
					color: #fff;
				}
			}
	.shareBox{
		background: #F1F1F1;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding-top: 40rpx;
		padding-bottom: 40rpx;
		.item{
			padding: 0;
			background: none;
			margin: 0;
			&::after{
				display:none
			}
			image{
				display: block;
				width: 104rpx;
				height: 104rpx;
			}
			text{
				font-size: 22rpx;
				height: 30rpx;
				line-height: 30rpx;
				color: #666666;
				display: block;
				text-align: center;
				margin-top: 12rpx;
			}
		}
	}
	.chooseGoodsBox{
		padding: 30rpx;
		box-sizing: border-box;
		.color{
			margin-top: 48rpx;
			margin-bottom: 50rpx;
			.title{
				font-size: 28rpx;
				color: #333;
				margin-bottom: 20rpx;
			}
			.cbox{
				display: flex;
				flex-wrap: wrap;
				.item{
					margin-right: 48rpx;
					.block{
						width: 72rpx;
						height: 72rpx;
					}
					.text{
						font-size: 24rpx;
						color: #666666;
						text-align: center;
						margin-top: 10rpx;
					}
					&.active{
						position: relative;
						.block{
							&::after{
								content: "";
								width: 84rpx;
								height: 84rpx;
								border: 1rpx solid #0D0D0D;
								position: absolute;
								left: -8rpx;
								top: -8rpx;
							}
						}
					}
				}
			}
		}
		.goodsNum{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;
			.title{
				font-size: 28rpx;
				color: #333;
			}
		}
		.btn{ 
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 60rpx;
			.btn1{
				width: 330rpx;
				height: 88rpx;
				border-radius: 50rpx;
				border: 1rpx solid #020202;
				text-align: center;
				line-height: 88rpx;
				font-size: 30rpx;
				color: #020202;
			}
			.btn2{
				width: 330rpx;
				height: 88rpx;
				border: 1px solid #020202;
				background: #020202;
				border-radius: 50rpx;
				color: #fff;
				text-align: center;
				line-height: 88rpx;
				margin-left: 24rpx;
				font-size: 30rpx;
			}
		}
		.pop_t1{
			margin-bottom: 30rpx;
			.t{
				display: flex;
				align-items: flex-end;
				.stock{
					font-size: 24rpx;
					color: #999;
					margin-left: 30rpx;
				}
			}
			.t1{
				font-size: 44rpx;
				font-family: 'DINPro-Medium';
				color: #333;
			}
			.t2{
				font-size: 24rpx;
				color: #999;
				margin-top: 12rpx;
			}
		}
	}
	.banner{
		position: relative;
		.heart{
			position: absolute;
			right: 30rpx;
			top: 50rpx;
			z-index: 999;
			image{
				width: 44rpx;
				height: 44rpx;
			}
		}
		.arrow-left{
			position: fixed;
			left: 0rpx;
			top:0;
			display: flex;
			width: 100%;
			align-items: center;
			.icon{
				width: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.share{
			position: absolute;
			right: 30rpx;
			top: 80rpx;
			z-index: 999;
			image{
				width: 44rpx;
				height: 44rpx;
			}
		}
	}
	.zw{
		height: 80rpx;
		padding: 30rpx;
	}
	.goodsBottomBtn{
		background: #fff;
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(10,17,24,0.06);
		.right{
			display: flex;
			.btn1{
				width: 240rpx;
				height: 80rpx;
				border-radius: 50rpx;
				border: 1rpx solid #020202;
				text-align: center;
				line-height: 80rpx;
				font-size: 30rpx;
				color: #020202;
			}
			.btn2{
				width: 240rpx;
				height: 80rpx;
				background: #020202;
				border: 1px solid #020202;
				border-radius: 50rpx;
				color: #fff;
				text-align: center;
				line-height: 80rpx;
				margin-left: 24rpx;
				font-size: 30rpx;
			}
		}
		.left{
			display: flex;
			align-items: center;
			.contact{
				padding: 0;
				background: none;
				&::after{
					border: none;
				}
			}
			.item{
				&:first-child{
					margin-right: 30rpx;
				}
			}
			image{
				width: 62rpx;
				display: block;
				height: 62rpx;
			}
		}
	}
	.goodsDetail{
		background: #fff;
		margin-top:40rpx;
		padding: 40rpx 30rpx;
		margin-bottom: 40rpx;
		.title{
			font-size: 32rpx;
			color: #333333;
			margin-bottom: 20rpx;
		}
	}
		.reviews{
			background: #fff;
			padding: 40rpx 30rpx;
			.bot{
				.imglist{
					display: flex;
					flex-wrap: wrap;
					image{
						width:166rpx;
						height: 166rpx;
						margin-right: 20rpx;
					}
				}
				.con{
					font-size: 24rpx;
					color: #333;
					margin-top: 30rpx;
					margin-bottom: 25rpx;
				}
				.t{
					display: flex;
					justify-content: space-between;
					.time{
						font-size: 22rpx;
						color: #999999;
					}
					.userinfo{
						display: flex;
						align-items: center;
						image{
							width: 56rpx;
							height: 56rpx;
							border-radius: 50%;
							margin-right: 16rpx;
						}
						.text{
							text{
								font-size: 22rpx;
								color: #999999;
							}
							
						}
					}
				}
			}
			.top{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 35rpx;
				text{
					font-size: 32rpx;
					color: #333;
				}
				.more{
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #999999;
				}
			}
		}
	.page-top{
		background: #fff;
		margin-bottom: 20rpx;
		.sbox2{
			font-size: 38rpx;
			color: #212121;
			padding: 40rpx 30rpx;
		}
		.sbox1{
			background: #020202;
			display: flex;
			align-items: center;
			height: 88rpx;
			padding: 23rpx 30rpx;
			.t1{
				font-size: 30rpx;
				color: #fff;
				font-family: 'DINPro-Medium';
			}
			.t2{
				font-size: 30rpx;
				color: rgba(255,255,255,.6);
				margin-left: 40rpx;
				font-family: 'DINPro-Medium';
			}
			.t3{
				font-size: 30rpx;
				color: rgba(255,255,255,.6);
				margin-left: auto;
				border-left: 1px solid rgba(255,255,255,.6);
				padding-left: 60rpx;
			}
		}
	}
</style>